Семинар по БЭМ для CTI

Владимир Гриненко

BEM

БЭМ для CTI

Владимир Гриненко
2015

Вопросы

Преимущества разработки на БЭМ

Какие преимущества даёт разработка интерфейса на БЭМ

БЭМ позволяет

Нейминг

Блок__Элемент_Модификатор

БЭМ позволяет

БЭМ позволяет

cat_type_red
cat_state_wet

3 источника, 3 составные части

Преимущества

Как меняется процесс разработки

Отличия БЭМ

BEMJSON

{
    block: 'button',
    mods: { theme: 'promo' },
    content: 'Разместить рекламу'
}

Отличия БЭМ

Файловая система

prj/
    blocks/
        header/
            header.css
            header.js
            header.tmpl
            header.svg
            header.md
		

Файловая система

prj/
    blocks/
        header/
            _theme/
        	    header_theme_simple.css
        	    header_theme_full.css
            __logo/
                header__logo.css
		

Отличия БЭМ

BEMHTML

 block button {
    tag: 'input'
    attrs: { type: 'button'}
}

Как работать с шаблонами

Шаблоны

Шаблоны. Принцип работы

Шаблоны. Двухзвенная архитектура

Первый этап

Данные:
{
    "login": "vasia",
    "name": "Василий"
}

Преобразование:
blocks.user = function(data) {
    return {
        block: 'user',
        url: 'https://mysite.ru/users/' + data.login,
        content: data.name
    };
}

Второй этап

Данные:
{
    block: 'user',
    url: 'https://mysite.ru/users/vasia',
    content: 'Василий'
}

Преобразование:
block('user')(
    tag()('a'),
    attrs()({ href: this.ctx.url })
);

Результат: <a class="user" href="https://mysite.ru/users/vasia">Василий</a>

Почему шаблоны такие

Почему шаблоны такие

Аналогия

<div style="width: 100px; height: 50px; font-size: 14px;"></div>
VS.

<div class="block"></div>
+
.block {
    width: 100px;
    height: 50px;
    font-size: 14px;
}
		

Как загружать бандлы в рантайме

YModules

Как загружать бандлы в рантайме

Тестирование

Что тестируем

Чем тестируем

Как тестируем

Как быстро начать разрабатывать на БЭМ

Quick start

Fork me on Github